<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA Website</title>

<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/css/styles.css">

<link rel="manifest" href="/manifest.json">

<meta name="theme-color" content="#ace">
<link rel="icon" sizes="192x192" href="/images/logo/logo192.png">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="/images/logo/logo192.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/images/logo/logo180.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/logo/logo152.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/logo/logo072.png">

<link rel="shortcut icon" href="/images/logo/logo016.png">
<link rel="shortcut icon" href="/favicon.ico">

<meta name="application-name" content="PWA Website">
<meta name="description" content="This is a demonstration website which uses Progressive Web App technologies to provide offline functionality.">
<meta name="keywords" content="website, pwa, offline">
<meta name="author" content="Craig Buckler">
<meta name="robots" content="noindex, nofollow">

</head>
<body>

<!-- header -->
<header>

  <!-- logo -->
  <a href="/" class="logo"><img src="/images/logo/logo152.png" alt="PWA"></a>

</header>

<!-- content -->
<main>
<article>

  <figure data-href="/images/hero/power-lo.jpg" data-srcset="/images/hero/power-lo.jpg 600w, /images/hero/power-hi.jpg 1200w" class="primary progressive replace">
    <img src="/images/hero/power-pv.jpg" class="preview" alt="enable switch" />
  </figure>

  <h1>Enable Your Website's Inner App</h1>

  <p>This is an example website. It provides no useful information other than demonstrating how any site can be adapted into a Progressive Web App. The benefits on mobile devices:</p>

  <figure class="boxout2">
    <a href="/images/workbench.jpg" class="progressive replace">
      <img src="/images/workbench-pv.jpg" class="preview" alt="workspace" />
    </a>
    <figcaption>Some cliched nonsense about data architecture or using the right tool.</figcaption>
  </figure>

  <ul>
    <li>the user is prompted to add your site's icon to their home screen</li>
    <li>your site opens in it's own app-like window after a short splash screen</li>
    <li>your site works offline. Static assets remain cached so the site loads quickly.</li>
  </ul>

  <h2>PWAs without the pain</h2>

  <p>Most Progressive Web App tutorials describe how to build a single-page application which emulates a native mobile interface. That's very useful but there's no need to build something special to take advantage of PWA technologies.</p>

  <p>Within a few hours you can have a mobilized website.</p>

  <h2>Less information</h2>

  <p>There's nothing more to say on this page. It's time for some Lorem Ipsum!</p>

  <figure class="boxout1">
    <a href="/images/beach.jpg" class="progressive replace">
      <img src="/images/beach-pv.jpg" class="preview" alt="workspace" />
    </a>
    <figcaption>We work while you play and other overused statements</figcaption>
  </figure>

  <p>Donec eget vestibulum nisl, ut luctus nisi. Sed et ipsum libero. Nullam bibendum purus non velit pulvinar dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam massa leo, eleifend at est id, condimentum facilisis felis. Nulla luctus ullamcorper nibh, rutrum vestibulum turpis. Vestibulum sit amet nisi sed velit lobortis ornare vitae id sem. Quisque quis semper justo, a facilisis tellus.</p>

  <p>Vestibulum non condimentum est. Donec ultrices, sapien a scelerisque consectetur, metus tellus rutrum diam, in molestie nisi urna vitae turpis. Nunc eleifend mauris massa, sit amet pharetra magna tincidunt nec. Etiam ornare tellus odio, ut placerat ligula dictum nec.</p>

  <p>In nec feugiat sem. Nullam id egestas dolor, et consectetur mi. Quisque vel lectus eu dolor tincidunt aliquam. Vestibulum tempus et turpis nec tincidunt. Nulla vitae arcu eget quam varius ullamcorper sed vel augue.</p>

  <p>Praesent fermentum porttitor sapien, euismod rutrum massa pulvinar a. Nulla quis elit id elit efficitur iaculis. Curabitur at diam nunc. Donec pulvinar lorem vel tincidunt eleifend. Cras aliquam sem vel pharetra egestas. Nam risus justo, dignissim vel metus ac, fermentum dictum purus.</p>

</article>
</main>

<!-- footer -->
<footer>
  <p>&copy;NOW</p>
  <p>All rights reserved.</p>
  <p>We don't track you or do anything nasty. Or so we say.</p>
  <p>Nothing to see here. Please move along.</p>
</footer>

<!-- menu link -->
<div id="menu"><a href="#nav">menu</a></div>

<!-- navigation -->
<nav id="nav">
  <ul>
    <li><a href="#menu" title="close menu" class="close">&#x2715;</a></li>
    <li><a href="/" class="active nav">home</a></li>
    <li><a href="/work/" class="nav">work</a></li>
    <li><a href="/about/" class="nav">about</a></li>
    <li><a href="/contact/" class="nav">contact</a></li>
  </ul>
</nav>

<script src="/js/main.js" defer></script>
</body>
</html>
